<template>
	<view>
		<view class="banner">
			<view class="goBack" :style="{top:getStatusBarHeight+4+'px'}">
				<uni-icons @click="goBack" class="icon" type="back" color="#fff" size="18"></uni-icons>
				<view class="title">{{queryData.name}}</view>
			</view>
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"
				autoplay>
				<swiper-item v-for="(item,index) in queryData.resourceImg" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="contbox">
			<view>
				<u-tabs :list="tabslist" @click="tabsClick" :current="current"></u-tabs>
			</view>
		</view>
		<view v-if="current == 0">
			<deviceRelaData :queryData="queryData"></deviceRelaData>
		</view>
		<view v-if="current == 1">
			<devicePanel :queryData="queryData"></devicePanel>
		</view>
		<view v-if="current == 2">
			<deviceHistory></deviceHistory>
		</view>
		<view v-if="current == 3">
			<deviceAlarts :queryData="queryData"></deviceAlarts>
		</view>
		<view v-if="current == 4">
			<deviceBasic :queryData="queryData"></deviceBasic>
		</view>
		<view v-if="current == 5">
			<deviceConfig></deviceConfig>
		</view>
		<view v-if="current == 6">
			<deviceDiagnosis></deviceDiagnosis>
		</view>
	</view>
</template>

<script>
	import {
		getStatusBarHeight,
		getTitleBarHeight,
		getNavBarHeight,
	} from "../../utils/system.js"
	import deviceRelaData from '@/components/deviceData/deviceRelaData.vue'
	import deviceHistory from '@/components/deviceData/deviceHistory.vue'
	import deviceAlarts from '@/components/deviceData/deviceAlarts.vue'
	import deviceBasic from '@/components/deviceData/deviceBasic.vue'
	import deviceConfig from '@/components/deviceData/deviceConfig.vue'
	import deviceDiagnosis from '@/components/deviceData/deviceDiagnosis.vue'
	import devicePanel from '@/components/deviceData/devicePanel.vue'
	export default {
		data() {
			return {
				bindsInfo: {},
				deviceInfo: {},
				show: false,
				current: 0,
				queryData: {},
				tabslist: [{
						name: '实时数据',
					}, {
						name: '数据面板',
					}, {
						name: '历史数据',
					},
					{
						name: '报警数据'
					},
					{
						name: '基本信息'
					}, {
						name: '台账信息'
					},
					{
						name: '设备诊断'
					},
				],
			};
		},
		watch: {},
		computed: {
			infaceOptions() {
				if (this.queryData.proto === 'modbus-rtu') {
					return [{
							name: 'rs485a',
							_id: 'rs485a'
						},
						{
							name: 'rs485b',
							_id: 'rs485b'
						},
						{
							name: 'rs232',
							_id: 'rs232'
						},
					]
				} else {
					return [{
						name: 'lan',
						_id: 'lan'
					}]
				}
			},
			getStatusBarHeight() {
				return uni.getSystemInfoSync().statusBarHeight || 15
			},
			getTitleBarHeight() {
				if (uni.getMenuButtonBoundingClientRect()) {
					let {
						top,
						height
					} = uni.getMenuButtonBoundingClientRect();
					return height + (top - getStatusBarHeight()) * 2
				} else {
					return 40;
				}
			},
		},
		components: {
			deviceRelaData,
			deviceHistory,
			deviceAlarts,
			deviceBasic,
			deviceConfig,
			deviceDiagnosis,
			devicePanel
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			tabsClick(e) {
				this.current = e.index;
				console.log('e', e);
			},
			async getDevice() {
				const db = uniCloud.database()
				const res = await db.collection('res').doc(this.queryData._id).get()
				this.deviceInfo = res.result.data[0]
			}
		},
		onLoad: function(option) {
			this.queryData = JSON.parse(decodeURIComponent(option.item));
			if (this.queryData.bindStatus == 0) {
				uni.navigateTo({
					url: '/pages/deviceBind/deviceBind?item=' + decodeURIComponent(option.item),
				})
			}
			this.getDevice()
		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep .u-tabs{
	// 	background: radial-gradient(117.67% 54.29% at 70.23255813953489% -0.8583690987124464%, rgba(217, 241, 255, 1) 0.01%, rgba(246, 252, 255, 1) 100%);
	// 	// top: 0 !important;
	// }
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			width: 90%;
			border-radius: 10px;
			background-color: #fff;
			padding: 10px;

			.title {
				text-align: center;
				padding: 0 0px 10px;
				border-bottom: 1px solid #409eff;

				.iconleft {
					position: fixed;
					left: 30px;
				}
			}
		}
	}



	::v-deep .u-cell__label {
		color: #409eff;
		font-size: 32rpx;
		font-weight: 600;
	}

	.banner {
		.goBack {
			left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			z-index: 99;

			.icon {
				width: 27px;
				height: 27px;
				border-radius: 50px;
				line-height: 28px;
				background: rgba(0, 0, 0, 0.05);
				border: 2rpx solid rgba(255, 255, 255, 1);
				text-align: center;
			}

			.title {
				font-size: 14px;
				color: #fff;
				margin-left: 10px;
				font-weight: 700;
			}
		}

		width: 750rpx;
		// padding: 30rpx 0;

		swiper {
			width: 750rpx;
			height: 340rpx;

			&-item {
				width: 100%;
				height: 100%;
				// padding: 0 30rpx;

				image {
					width: 100%;
					height: 100%;
					// border-radius: 10rpx;
				}
			}
		}
	}

	.contbox {
		// width: 345px;
		// margin: 10px auto;
		width: 690rpx;
		height: 44px;
		// padding: 20rpx 40rpx;
		margin: 20rpx auto;
		border-radius: 16rpx;
		box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.05);
		background: radial-gradient(117.67% 54.29% at 70.23255813953489% -0.8583690987124464%, rgba(217, 241, 255, 1) 0.01%, rgba(246, 252, 255, 1) 100%);
		border: 1px solid rgba(255, 255, 255, 1);
		// position: relative;
		// top: -40px;
		// left: 0;
	}
</style>
